import { useState, useEffect } from "react";
import { 
  Card, Button, Avatar, Input, Space, 
  Table, Tag, Checkbox, Form, Modal, 
  Row, Col, Typography, Divider, Select, Badge,
  Tooltip, Popconfirm, message
} from "antd";
import { 
  PlusOutlined, ExclamationCircleOutlined, 
  SaveOutlined, CloseOutlined, 
  SearchOutlined, UserOutlined, 
  CalendarOutlined, 
  EditOutlined, DeleteOutlined,
  InfoCircleOutlined,
  ClockCircleOutlined, FilterOutlined
} from "@ant-design/icons";
import dayjs from "dayjs";
import "./arrange.css"

const { Option } = Select;
const { Title, Text, Paragraph } = Typography;

// 调整排班的模态框组件
export const AdjustScheduleModal = (props) => {
  const { visible, onCancel, onSave, initialData, date } = props;
  
  const [form] = Form.useForm();
  const [selectedDoctors, setSelectedDoctors] = useState([]);
  const [allDoctors, setAllDoctors] = useState([]);
  const [filteredDoctors, setFilteredDoctors] = useState([]);
  const [searchText, setSearchText] = useState('');
  const [departmentType, setdepartmentType] = useState('all');
  const [loading, setLoading] = useState(false);

  // 监听initialData变化并更新选中的医生
  useEffect(() => {
    if (initialData && initialData.doctors && initialData.doctors.length) {
      setSelectedDoctors(initialData.doctors);
      form.setFieldsValue({ selectedDoctors: initialData.doctors.map(d => d.id) });
    } else {
      setSelectedDoctors([]);
      form.setFieldsValue({ selectedDoctors: [] });
    }
  }, [initialData, form]);

  // 模拟所有员工数据
  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      const doctors = [
        { id: 1, name: "张医生", department: "推拿按摩", color: "#1890ff", rating: 4.9, experience: "10年" },
        { id: 2, name: "李医生", department: "针灸", color: "#722ed1", rating: 4.7, experience: "8年" },
        { id: 3, name: "王医生", department: "艾灸", color: "#eb2f96", rating: 4.8, experience: "12年" },
        { id: 4, name: "赵医生", department: "推拿按摩", color: "#fa8c16", rating: 4.6, experience: "7年" },
        { id: 5, name: "陈医生", department: "拔罐", color: "#13c2c2", rating: 4.5, experience: "9年" },
        { id: 6, name: "刘医生", department: "针灸", color: "#52c41a", rating: 4.9, experience: "15年" },
        { id: 7, name: "黄医生", department: "艾灸", color: "#f5222d", rating: 4.4, experience: "6年" },
      ];
      
      setAllDoctors(doctors);
      setFilteredDoctors(doctors);
      setLoading(false);
    }, 600);
  }, []);

  // 筛选医生
  useEffect(() => {
    let result = [...allDoctors];
    
    // 按治疗类型筛选
    if (departmentType !== 'all') {
      result = result.filter(doctor => doctor.department === departmentType);
    }
    
    // 按搜索文本筛选
    if (searchText) {
      const text = searchText.toLowerCase();
      result = result.filter(
        doctor => doctor.name.toLowerCase().includes(text) || 
                 doctor.department.toLowerCase().includes(text)
      );
    }
    
    setFilteredDoctors(result);
  }, [searchText, departmentType, allDoctors]);

  // 处理医生选择变化
  const handleDoctorSelect = (checkedValues) => {
    // 找到选中的医生信息
    const newSelected = allDoctors.filter(doctor => 
      checkedValues.includes(doctor.id)
    );
    
    setSelectedDoctors(newSelected);
  };

  // 保存排班设置
  const handleSave = () => {
    if (selectedDoctors.length === 0) {
      message.warning('请至少选择一位员工进行排班');
      return;
    }
    
    // 模拟保存加载
    setLoading(true);
    setTimeout(() => {
      onSave(selectedDoctors);
      message.success('排班调整已保存');
      setLoading(false);
    }, 800);
  };

  // 获取所有治疗类型
  const departmentTypes = ['all', ...Array.from(new Set(allDoctors.map(d => d.department)))];

  // 治疗类型对应的颜色映射
  const departmentColors = {
    '推拿按摩': '#1890ff',
    '针灸': '#722ed1',
    '艾灸': '#eb2f96',
    '拔罐': '#13c2c2'
  };

  return (
  <Modal
    title={
      <Space align="center" className="text-primary">
        <CalendarOutlined className="text-primary text-lg" />
        <span className="font-semibold text-gray-800 text-lg">
          调整排班 - {dayjs(date).format('YYYY年MM月DD日')}
        </span>
        <Badge 
          status="processing" 
          text="可编辑" 
          className="bg-primary/10 text-primary border-primary/20 rounded-full"
        />
      </Space>
    }
    open={visible}
    onCancel={onCancel}
    style={{ top: "50px" }}
    footer={[
      <Button 
        key="cancel" 
        onClick={onCancel}
        disabled={loading}
        className="px-6 py-2 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-all duration-300"
      >
        <CloseOutlined className="mr-2" /> 取消
      </Button>,
      <Button 
        key="save" 
        type="primary" 
        onClick={handleSave}
        loading={loading}
      >
        <SaveOutlined className="mr-2" /> 保存调整
      </Button>
    ]}
    width={900}
    maskClosable={false}
    className="rounded-xl overflow-hidden shadow-[0_10px_30px_rgba(0,0,0,0.1)] border-none"
  >
    <div className="modal-box bg-white">
      {/* 筛选工具栏 */}
      <div style={{ 
        padding: '18px 24px', 
        backgroundColor: '#f8fafc', 
        borderBottom: '1px solid #f1f5f9',
        display: 'flex', 
        gap: 16,
        flexWrap: 'wrap',
        alignItems: 'center',
        borderRadius: '8px 8px 0 0'
      }}>
        <Input
          placeholder="搜索员工姓名或服务类型"
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
          prefix={<SearchOutlined className="text-gray-400" />}
          style={{ 
            flex: 1, 
            minWidth: 200,
            height: 42,
            borderRadius: 8,
            borderColor: '#e2e8f0',
            paddingLeft: 14
          }}
          allowClear
          className="transition-all duration-300 focus:border-primary focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
          clearIcon={<CloseOutlined className="text-gray-400 hover:text-gray-600" />}
        />
        
        <Select
          value={departmentType}
          onChange={setdepartmentType}
          style={{ width: 180, height: 42, borderRadius: 8, borderColor: '#e2e8f0' }}
          placeholder="选择服务类型"
          className="transition-all duration-300"
          dropdownRender={menu => (
            <div style={{ 
              padding: '12px 8px', 
              borderRadius: 8,
              boxShadow: '0 4px 16px rgba(0,0,0,0.08)',
              border: '1px solid #f1f5f9'
            }}>
              <Text type="secondary" style={{ 
                fontSize: '12px', 
                padding: '0 8px',
                color: '#64748b',
                display: 'block',
                marginBottom: 8
              }}>
                筛选治疗类型
              </Text>
              {menu}
            </div>
          )}
          optionLabelProp="label"
        >
          {departmentTypes.map(type => (
            <Option 
              key={type} 
              value={type}
              label={type === 'all' ? '全部类型' : type}
              className="py-3 px-4 hover:bg-primary/5 transition-colors"
            >
              {type === 'all' ? (
                <span className="text-gray-800">全部类型</span>
              ) : (
                <Space align="center">
                  <span style={{
                    display: 'inline-block',
                    width: 10,
                    height: 10,
                    borderRadius: '50%',
                    backgroundColor: departmentColors[type] || '#ccc',
                    marginRight: 6
                  }}></span>
                  <span className="text-gray-800">{type}</span>
                </Space>
              )}
            </Option>
          ))}
        </Select>
        
        <Button 
          icon={<PlusOutlined className="mr-2" />} 
          onClick={() => {
            setSearchText('');
            setdepartmentType('all');
          }}
          size="middle"
          className="ml-auto px-5 py-2 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-all duration-300"
        >
          重置筛选
        </Button>
      </div>

      <div style={{ padding: '28px 24px' }}>
        {/* 标题区域 */}
        <div style={{ 
          display: 'flex', 
          alignItems: 'center', 
          marginBottom: 20,
          justifyContent: 'space-between'
        }}>
          <Space align="center">
            <Title level={5} style={{ 
              margin: 0, 
              color: '#1e293b',
              fontWeight: 600,
              fontSize: 16
            }}>可选人员</Title>
            <Badge 
              count={filteredDoctors.length} 
              className="bg-primary/10 text-primary border-primary/20 text-xs"
            />
          </Space>
          <Text type="secondary" style={{ 
            fontSize: 12, 
            color: '#64748b'
          }}>
            可通过筛选快速找到目标员工
          </Text>
        </div>
      
        <Form
          form={form}
          layout="vertical"
          initialValues={{ selectedDoctors: initialData?.doctors?.map(d => d.id) || [] }}
        >
          <Form.Item name="selectedDoctors" noStyle>
            <Table
              dataSource={filteredDoctors}
              columns={[
                {
                  title: "员工信息",
                  key: "info",
                  render: (_, record) => (
                    <Space align="center" size="large">
                      <Avatar 
                        size="small" 
                        style={{ 
                          backgroundColor: record.color,
                          transition: 'transform 0.2s, box-shadow 0.2s',
                          width: 36,
                          height: 36,
                          fontSize: 16
                        }}
                        icon={<UserOutlined className="text-white" />}
                        className="hover:scale-110 hover:shadow-sm"
                      />
                      <div>
                        <div style={{ 
                          fontWeight: 600, 
                          color: '#1e293b',
                          fontSize: 14
                        }}>{record.name}</div>
                        <div style={{ 
                          display: 'flex', 
                          alignItems: 'center', 
                          marginTop: 4,
                          gap: 8
                        }}>
                          <Tag 
                            size="small" 
                            color={record.color}
                            className="transition-all duration-200 px-2 py-0 h-5 text-xs"
                            style={{ borderRadius: 4 }}
                          >
                            {record.department}
                          </Tag>
                          <Text type="secondary" style={{ 
                            fontSize: 12,
                            color: '#64748b'
                          }}>
                            经验 {record.experience} · 评分 {record.rating}
                          </Text>
                        </div>
                      </div>
                    </Space>
                  )
                },
              ]}
              rowKey="id"
              loading={loading}
              pagination={{ 
                pageSize: 5,
                showSizeChanger: false,
                showTotal: (total) => `共 ${total} 名员工`,
                className: 'mt-4',
                itemStyle: { borderRadius: 4 },
                activeItemStyle: { backgroundColor: '#1890ff', borderColor: '#1890ff' }
              }}
              rowSelection={{
                type: "checkbox",
                selectedRowKeys: selectedDoctors.map(d => d.id),
                columnTitle: <Checkbox className="text-primary hover:bg-primary/5" />,
                // 全选处理
                onSelectAll: (selected, selectedRows, changeRows) => {
                  const currentValues = form.getFieldValue('selectedDoctors') || [];
                  let newValues;
                  
                  if (selected) {
                    // 添加当前页所有未选中的
                    newValues = [...currentValues];
                    changeRows.forEach(row => {
                      if (!newValues.includes(row.id)) {
                        newValues.push(row.id);
                      }
                    });
                  } else {
                    // 移除当前页所有选中的
                    newValues = currentValues.filter(id => 
                      !changeRows.some(row => row.id === id)
                    );
                  }
                  
                  form.setFieldsValue({ selectedDoctors: newValues });
                  handleDoctorSelect(newValues);
                },
                // 单选处理
                onSelect: (record, selected) => {
                  const currentValues = form.getFieldValue('selectedDoctors') || [];
                  const newValues = selected 
                    ? [...currentValues, record.id]
                    : currentValues.filter(id => id !== record.id);
                  
                  form.setFieldsValue({ selectedDoctors: newValues });
                  handleDoctorSelect(newValues);
                },
                // 选择项
                selections: [
                  {
                    key: 'all',
                    text: '全选',
                    onSelect: () => {
                      const ids = filteredDoctors.map(r => r.id);
                      form.setFieldsValue({ selectedDoctors: ids });
                      handleDoctorSelect(ids);
                    }
                  },
                  {
                    key: 'none',
                    text: '取消全选',
                    onSelect: () => {
                      form.setFieldsValue({ selectedDoctors: [] });
                      handleDoctorSelect([]);
                    }
                  }
                ]
              }}
              className="border rounded-xl overflow-hidden transition-all duration-300 shadow-sm table-ant"
              scroll={{ x: 'max-content' }}
              rowClassName="transition-colors duration-150 cursor-pointer hover:bg-gray-50"
              tableLayout="fixed"
            />
          </Form.Item>
        </Form>

        {/* 已选员工区域 */}
        <Divider 
          orientation="left" 
          style={{ 
            margin: '36px 0 20px',
            borderColor: '#f1f5f9',
            fontWeight: 400
          }}
        >
          <Space align="center">
            <Text strong style={{ 
              color: '#1e293b',
              fontSize: 16,
              fontWeight: 600
            }}>已选排班员工</Text>
            <Badge 
              count={selectedDoctors.length} 
              className="bg-primary text-white text-xs"
            />
          </Space>
        </Divider>
        
        {selectedDoctors.length === 0 ? (
          // 空状态
          <div style={{ 
            textAlign: 'center', 
            padding: '50px 20px', 
            backgroundColor: '#f8fafc',
            borderRadius: 12,
            marginBottom: 16,
            border: '1px dashed #bfdbfe',
            transition: 'all 0.3s',
            boxShadow: '0 2px 8px rgba(24,144,255,0.05)'
          }}>
            <InfoCircleOutlined style={{ 
              fontSize: 36, 
              color: '#93c5fd', 
              marginBottom: 16,
              opacity: 0.8
            }} />
            <Paragraph type="secondary" style={{ 
              margin: 0,
              color: '#64748b',
              fontSize: 14
            }}>
              尚未选择任何员工，请从上方列表中选择
            </Paragraph>
            <Button 
              type="text" 
              style={{ marginTop: 16, color: '#1890ff' }}
              onClick={() => {
                // 平滑滚动到表格区域
                document.querySelector('.table-ant').scrollIntoView({ behavior: 'smooth' });
              }}
            >
              前往选择 →
            </Button>
          </div>
        ) : (
          // 已选员工列表
          <div style={{ 
            maxHeight: 280, 
            overflowY: 'auto',
            border: '1px solid #f1f5f9',
            borderRadius: 12,
            padding: '16px',
            marginBottom: 16,
            transition: 'all 0.3s',
            backgroundColor: '#f8fafc'
          }}>
            {selectedDoctors.map(doctor => (
              <div
                key={doctor.id}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  padding: '16px 20px',
                  marginBottom: 12,
                  backgroundColor: 'white',
                  borderRadius: 10,
                  border: '1px solid #f1f5f9',
                  transition: 'all 0.2s',
                  boxShadow: '0 2px 6px rgba(0,0,0,0.03)'
                }}
                className="hover:shadow-md hover:border-primary/30"
              >
                <Space align="center" size="large">
                  <Avatar 
                    size="small" 
                    style={{ 
                     
                      width: 34,
                      height: 34,
                      fontSize: 15
                    }}
                    icon={<UserOutlined className="text-white" />}
                  />
                  <span style={{ 
                    fontWeight: 600, 
                    color: '#1e293b',
                    fontSize: 14
                  }}>{doctor.name}</span>
                  <Tag 
                    size="small" 
                    
                    style={{ borderRadius: 4, padding: '2px 8px', fontSize: 12 }}
                  >
                    {doctor.department}
                  </Tag>
                  <Text type="secondary" style={{ 
                    fontSize: 12,
                    color: '#64748b'
                  }}>
                    经验 {doctor.experience}
                  </Text>
                </Space>
                
                <Popconfirm
                  title="确定要移除这位员工吗？"
                  onConfirm={() => {
                    const currentValues = form.getFieldValue('selectedDoctors') || [];
                    const newValues = currentValues.filter(id => id !== doctor.id);
                    form.setFieldsValue({ selectedDoctors: newValues });
                    handleDoctorSelect(newValues);
                  }}
                  okText="是"
                  cancelText="否"
                  placement="topRight"
                  style={{ borderRadius: 8 }}
                  okButtonProps={{ 
                    style: { backgroundColor: '#ff4d4f', borderColor: '#ff4d4f' } 
                  }}
                  cancelButtonProps={{ style: { borderColor: '#e2e8f0' } }}
                >
                  <Button 
                    type="text" 
                    size="small" 
                    danger 
                    className="transition-colors duration-200 hover:bg-red-50 px-3"
                  >
                    <DeleteOutlined size={14} className="mr-1" /> 移除
                  </Button>
                </Popconfirm>
              </div>
            ))}
            
            {/* 底部提示 */}
            <div style={{ 
              marginTop: 16, 
              padding: '12px 16px',
              backgroundColor: 'white',
              borderRadius: 8,
              border: '1px solid #e2e8f0',
              display: 'flex',
              alignItems: 'center'
            }}>
              <ExclamationCircleOutlined style={{ 
                color: '#faad14', 
                marginRight: 8,
                fontSize: 14
              }} />
              <Text style={{ 
                fontSize: 13, 
                color: '#64748b',
                lineHeight: 1.5
              }}>
                已选择 <span className="text-primary font-medium">{selectedDoctors.length}</span> 名员工，
                确认后将更新该日期的排班信息
              </Text>
            </div>
          </div>
        )}
      </div>
    </div>
  </Modal>
  );
};

// 更新排班的主组件
export const UpdateArrange = (props) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [currentDate, setCurrentDate] = useState(dayjs().format('YYYY-MM-DD'));
  const [scheduleData, setScheduleData] = useState(props.data || {
    date: dayjs().format('YYYY-MM-DD'),
    status: "可预约",
    timeRange: "09:00 - 18:00",
    doctors: [
      { id: 1, name: "张医生", department: "推拿按摩", color: "#1890ff", rating: 4.9, experience: "10年" },
      { id: 2, name: "李医生", department: "针灸", color: "#722ed1", rating: 4.7, experience: "8年" }
    ]
  });
  const [loading, setLoading] = useState(false);

  // 当props.data变化时更新本地状态
  useEffect(() => {
    if (props.data) {
      setScheduleData(props.data);
      setCurrentDate(props.data.date);
    }
  }, [props.data]);

  
  // 打开调整排班模态框
  const handleOpenAdjustModal = () => {
    setModalVisible(true);
  };

  // 关闭调整排班模态框
  const handleCloseAdjustModal = () => {
    setModalVisible(false);
  };

  // 保存调整后的排班
  const handleSaveSchedule = (updatedDoctors) => {
    const updatedData = {
      ...scheduleData,
      doctors: updatedDoctors
    };
    setScheduleData(updatedData);
   
    // 如果父组件有onDataChange回调，通知数据已更新
    if (props.onDataChange) {
      props.onDataChange(updatedData);
    }
    setModalVisible(false);
  };

  // 保存所有更改
  const handleSaveAllChanges = () => {
    setLoading(true);
    setTimeout(() => {
      console.log("保存所有更改:", scheduleData);
      message.success('排班设置已成功保存');
      // 通知父组件保存成功
      if (props.onSaveSuccess) {
        props.onSaveSuccess(scheduleData);
      }
      setLoading(false);
    }, 800);
  };

 

  return (
    <div className="modal-box" style={{height:"520px"}}>
      <div className="max-w-6xl mx-auto">
        <Title level={3} style={{ marginBottom: 6, color: '#1f2937' }}>
          员工排班管理
        </Title>
        
        {/* 日期导航栏 */}
        <Card 
          style={{ 
            marginBottom: 6,
            border: 'none',
            boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
            borderRadius: '10px'
          }}
        
        >
          <div style={{ display: 'flex',alignItems: 'center' ,justifyContent:"space-between"}}>
          
            
            <div style={{ margin: '0 24px', textAlign: 'center' }}>
              <div style={{ fontSize: '18px', fontWeight: 600 }}>
                {dayjs(currentDate).format('YYYY年MM月DD日')}
              </div>
              <div style={{ 
                fontSize: '14px', 
                color: '#666',
                marginTop: 4
              }}>
                {['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][dayjs(currentDate).day()]}
                {dayjs(currentDate).isSame(dayjs(), 'day') && (
                  <Badge status="processing" text="今天" style={{ marginLeft: 8 }} />
                )}
              </div>
            </div>
            
          
            
            <div >
              <Button 
                type="primary" 
                icon={<EditOutlined />} 
                onClick={handleOpenAdjustModal}
                disabled={loading}
                className="transition-all duration-300 hover:shadow-md"
              >
                调整排班
              </Button>
            </div>
          </div>
        </Card>
        
        <Row gutter={[24, 24]}>
          {/* 基本信息卡片 */}
          <Col xs={24} md={7}>
            <Card 
              size="small" 
              title="排班信息" 
              style={{ 
                height: "100%", 
                borderRadius: "10px",
                border: "1px solid #f0f0f0",
                boxShadow: "0 2px 8px rgba(0,0,0,0.04)",
                transition: "all 0.3s"
              }}
              loading={loading}
            >
              <Space direction="vertical" size="middle" style={{ width: "100%" }}>
                <div style={{ padding: '12px 0' }}>
                  <Text type="secondary" style={{ fontSize: "13px" }}>
                    日期时间
                  </Text>
                  <div style={{ 
                    fontSize: "15px", 
                    fontWeight: 500, 
                    marginTop: "6px",
                    display: 'flex',
                    alignItems: 'center'
                  }}>
                    <CalendarOutlined size={14} style={{ marginRight: 6, color: '#1890ff' }} />
                    {dayjs(scheduleData.date).format('YYYY年MM月DD日')}
                  </div>
                  <div style={{ 
                    fontSize: "15px", 
                    fontWeight: 500, 
                    marginTop: "4px",
                    display: 'flex',
                    alignItems: 'center'
                  }}>
                    <ClockCircleOutlined size={14} style={{ marginRight: 6, color: '#1890ff' }} />
                   {scheduleData.timeRange}
                  </div>
                </div>

              
              </Space>
            </Card>
          </Col>

          {/* 员工排班卡片 */}
          <Col xs={24} md={17}>
            <Card 
              size="small" 
              title={
                <Space>
                  <UserOutlined />
                  <span>值班员工</span>
                  <Badge count={scheduleData.doctors.length} size="small" />
                  <Tooltip title="筛选">
                    <FilterOutlined style={{ color: '#999', marginLeft: 8 }} />
                  </Tooltip>
                </Space>
              }
              style={{ 
                borderRadius: "10px",
                border: "1px solid #f0f0f0",
                boxShadow: "0 2px 8px rgba(0,0,0,0.04)",
                transition: "all 0.3s"
              }}
             
              extra={
                <Text type="secondary" style={{ fontSize: 13 }}>
                  点击"调整排班"可修改
                </Text>
              }
              loading={loading}
            >
              <div 
                style={{ 
                  width: "100%",
                  maxHeight: "360px",
                  overflowY: "auto",
                  paddingRight: "8px"
                }}
              >
                {scheduleData.doctors.map((doctor, index) => (
                  <div
                    key={doctor.id}
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-between",
                      padding: "14px 16px",
                      backgroundColor: index % 2 === 0 ? "#fafafa" : "transparent",
                      borderRadius: "6px",
                      marginBottom: "10px",
                      border: "1px solid #f0f0f0",
                      transition: "all 0.2s"
                    }}
                    className="hover:shadow-sm hover:border-primary/20"
                  >
                    <Space size="middle">
                      <Avatar 
                        size="small" 
                        style={{ 
                          backgroundColor: doctor.color,
                          transition: 'transform 0.2s'
                        }}
                        icon={<UserOutlined />}
                        className="hover:scale-110"
                      />
                      <div>
                        <div style={{ fontWeight: 500, fontSize: "14px" }}>
                          {doctor.name}
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', marginTop: 3 }}>
                          <Tag 
                            color={doctor.color} 
                            size="small"
                            style={{ fontSize: "12px", marginRight: 8 }}
                          >
                            {doctor.department}
                          </Tag>
                          <Text type="secondary" style={{ fontSize: 12 }}>
                            经验 {doctor.experience} · 评分 {doctor.rating}
                          </Text>
                        </div>
                      </div>
                    </Space>

                  </div>
                ))}
                
                {scheduleData.doctors.length === 0 && (
                  <div style={{ 
                    textAlign: 'center', 
                    padding: '60px 20px', 
                    backgroundColor: '#f5f5f5',
                    borderRadius: '8px',
                    border: '1px dashed #e0e0e0',
                    margin: '10px 0',
                    transition: 'all 0.3s'
                  }}>
                    <InfoCircleOutlined style={{ fontSize: 32, color: '#999', marginBottom: 16 }} />
                    <Paragraph type="secondary" style={{ margin: 0, fontSize: 15 }}>
                      暂无排班员工，请点击"调整排班"添加
                    </Paragraph>
                  </div>
                )}
              </div>

              {/* 统计信息 */}
              {scheduleData.doctors.length > 0 && (
                <div style={{ 
                  marginTop: "20px", 
                  padding: "12px 16px", 
                  backgroundColor: "#f6ffed",
                  border: "1px dashed #b7eb8f",
                  borderRadius: "6px",
                  fontSize: "14px",
                  display: 'flex',
                  justifyContent: 'flex-end',
                  alignItems: 'center'
                }}>
                  <Text type="secondary" style={{ fontSize: "12px" }}>
                    最后更新: {dayjs().format('HH:mm')}
                  </Text>
                </div>
              )}
            </Card>
          </Col>
        </Row>

        {/* 操作按钮 */}
        <div style={{ 
          padding: "20px", 
          borderRadius: "8px",
          textAlign: "right",
          marginTop: "24px",
          background: 'white',
          boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
        }}>
          <Button 
            type="primary" 
            onClick={handleSaveAllChanges}
            size="default"
            loading={loading}
            className="transition-all duration-300 hover:shadow-lg px-6"
          >
            <SaveOutlined style={{ marginRight: 6 }} />
            保存所有更改
          </Button>
        </div>
      </div>

      {/* 调整排班模态框 */}
      <AdjustScheduleModal
        visible={modalVisible}
        onCancel={handleCloseAdjustModal}
        onSave={handleSaveSchedule}
        initialData={scheduleData}
        date={scheduleData.date}
      />
    </div>
  );
};
